import { useTransition, animated } from '@react-spring/web'
import styles from './index.module.less'

export default function AnimationList<T extends { height: number }>(props: { data: T[]; children: (item: T, index: number) => JSX.Element; classWrapper?: string }) {
    const { data, children, classWrapper } = props

    let height = 0
    const transitions = useTransition(
        data.map(item => ({ ...item, y: (height += item.height) - item.height })),
        {
            key: (item: any) => item.user_id,
            from: { height: 0, opacity: 0 },
            leave: { height: 0, opacity: 0 },
            enter: ({ y, height: h }) => ({ y, h, opacity: 1 }),
            update: ({ y, height: h }) => ({ y, h }),
        },
    )

    return (
        <div className={classWrapper || ''} style={{ height }}>
            {transitions((style, item, t, index) => (
                <animated.div className={styles.animation} style={{ zIndex: data.length - index, ...style }}>
                    {children(item, index)}
                </animated.div>
            ))}
        </div>
    )
}
